<script setup lang="ts">
import PostList from '@/components/post/PostList.vue'
import { getEnterprisePostApi, getPostListApi } from '@/api/path/post';
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const eid = ref(route.query.enterpriseId);
onMounted(() => {
  if(eid.value){
    getPosts(eid.value);
  }
});

const posts = ref([]);

// 是否动态列表长度为0
const isHadPosts = ref(false);

const notDeletedPostsCount = computed(() => {
  return posts.value.filter(post => !post.isDelete).length; 
});

const getPosts = async (eid: string)=>{
  await getEnterprisePostApi(eid).then(res => {
    console.log("getttttttttt")
    if (res.success) {
      posts.value = res.postList;
      console.log(posts.value)
      if( notDeletedPostsCount.value > 0){
        isHadPosts.value = true;
      }
    }
    else {
      // ElMessage.error(res.msg);
    }
  })
}

const handleUpdateList = (shouldUpdate: Boolean) => {
  if (shouldUpdate) {
    getPosts(String(eid.value));
  }
}

</script>
<template>
  <span class="post-wrapper" v-if="isHadPosts">
    <PostList 
    class="enterprise-posts"
    @updateList="handleUpdateList" 
    :posts="posts" 
    :is-had-posts="isHadPosts"
    />
  </span >
  <span class="enterprise-post-wrapper" v-else>
    暂无动态
  </span>
</template>
<style>
.enterprise-push-wrapper {
  .enterprise-posts {
    min-width: 100%;
    .posts-list {
      min-width: 100%;
      .post-div {
        min-width: 100%;
        .post-scrollbar-item {
          min-width: 100%;
        }
      }
    }
  }
}
</style>
<style scoped>
/*不知道为啥深度选择到post-div那一层就不行了，可能是因为循环渲染？我不懂。反正换成不scoped的style了*/
/*.enterprise-push-wrapper {*/
/*  display: flex;*/
/*  width: 100%;*/
/*  &:deep(.enterprise-posts) {*/
/*    min-width: 100%;*/
/*    width: 100%;*/
/*    &:deep(.posts-list) {*/
/*      min-width: 100%;*/
/*      width: 100%;*/
/*      &:deep(.post-div) {*/
/*        min-width: 100%;*/
/*        width: 100%;*/
/*        background-color: red;*/
/*        &:deep(.post-scrollbar-item) {*/
/*          min-width: 100%;*/
/*          width: 100%;*/
/*        }*/
/*      }*/
/*    }*/
/*  }*/
/*}*/
.enterprise-post-wrapper {
  display: flex;
  flex-direction: column;
  height: 350px;
  border-radius: 15px;
  background-color: white;
  border: 2px solid var(--color-plain);
  text-align: center;
}
.post-wrapper{
  display: flex;
  justify-items: flex-end;
  flex-direction: column;
  
}
.enterprise-posts /deep/ .post-scrollbar-item {
  flex: 1; /* 让子元素占据剩余空间 */
  min-width: 0; /* 允许元素缩小以适应内容 */
  width: 100%; /* 占满父容器宽度 */
}
</style>